<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <el-form ref="formRef" label-position="left" :model="formModel" :rules="formRules" label-width="120px">
      <el-row>
        <el-col :sm="24">
          <el-form-item label="名称" prop="Name">
            <el-input class="w100" clearable v-model="formModel.Name" placeholder="请输入名称" />
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="父节点" prop="Pid">
            <!-- {{formModel.Pid}} -->
            <el-tree-select class="w100" clearable v-model="formModel.Pid" :data="optionsOfMenus" check-strictly default-expand-all node-key="id"></el-tree-select>
          </el-form-item>
        </el-col>

        <el-col :sm="24">
          <el-form-item label="类型" prop="Rtype">
            <el-select class="w100" clearable v-model="formModel.Rtype" placeholder="选择类型">
              <el-option v-for="item of optionsOfType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="路径" prop="Path">
            <el-input class="w100" clearable v-model="formModel.Path" placeholder="选择路径" />
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="文件名" prop="FileName">
            <el-input class="w100" clearable v-model="formModel.FileName" placeholder="请输入文件名" />
          </el-form-item>
        </el-col>

        <!-- <el-col :sm="24">
          <el-form-item label="图标" prop="Icon">
            <el-input class="w100" clearable v-model="formModel.Icon" placeholder="选择图标" />
          </el-form-item>
        </el-col> -->
        <el-col :sm="24">
          <el-form-item label="排序" prop="sort">
            <el-input class="w100" clearable v-model="formModel.Seq" type="number" min="0" max="100000" placeholder="请输入排序" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" plain @click="onCancel()">取消</el-button>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 管理员编辑组件
 */
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { getNewObj } from '@/utils/EsCommon';

// ======================================================
//                      变量声明
// ======================================================

// emit
const emit = defineEmits(['success', 'cancel']);

// 表单数据
const formAttrs = {
  Id: "0",
  Pid: '',
  Name: '',
  Seq: '',
  Rtype: '',
  Path: '',
  Icon: '',
  FileName: '',
};

const formModel = ref(Object.assign({}, formAttrs));
// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '600px',
})
// 表单组件的引用实例
const formRef = ref(null);
// 类型选项数据
const optionsOfType = ref([
  { value: '0', label: '区域' },
  { value: '1', label: '菜单' },
  { value: '2', label: '按钮' },
]);
// 角色选项数据
const optionsOfMenus = ref([]);
// 表单校验规则
const formRules = ref({
  Name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
  ],
})

// ======================================================
//                      点击操作
// ======================================================

// 点击提交按钮
const onSubmit = () => {
  console.log('submit!', formModel.value);
  formRef.value.validate((valid, fields) => {
    if (!valid) {
      console.log('表单校验失败：', fields);
      return;
    }
    var param = {
      ...formModel.value,
      Id: Number(formModel.value.Id),
      Pid: formModel.value.Pid == "" || formModel.value.Pid == -1 ? 0 : formModel.value.Pid,
      Seq: Number(formModel.value.Seq),
      Rtype: Number(formModel.value.Rtype),
    };

    EsAjax.post(ApiUrls.resourceEdit, param).then(res => {
      if (res.data.code != 200) {
        ElMessage.warning(res.data.data + res.data.msg);
        return;
      }
      dialogInfo.value.visible = false;
      emit('success');
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })
  })
}

// 点击取消按钮
const onCancel = () => {
  dialogInfo.value.visible = false;
}

// ======================================================
//                      处理事件
// ======================================================

// 加载数据
const show = (title, item = null, treeOption, width = '600px') => {
  console.log(treeOption)
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;

  formModel.value = Object.assign({}, formAttrs);



  if (item) {
    console.log(JSON.stringify(item))
    item = getNewObj(item)
    formModel.value.Id = item.id
    formModel.value.Pid = item.parentId
    formModel.value.Name = item.name
    formModel.value.Seq = item.Seq
    formModel.value.Rtype = `${item.Rtype}`
    formModel.value.Path = item.path
    formModel.value.Icon = item.Icon
    formModel.value.FileName = item.FileName

  }

  optionsOfMenus.value = getNewObj(treeOption)

  // // 加载菜单选项数据
  // EsAjax.get(ApiUrls.resourceTreegrid).then(res => {
  //   console.log('加载菜单选项数据', res)
  //   if (res.data.code != 200) {
  //     ElMessage.warning(res.data.data + res.data.msg);
  //     return;
  //   }
  //   optionsOfMenus.value = res.data.data;
  // }).catch(err => { ElMessage.error('网络错误：' + err.message) })

}

defineExpose({
  show
})
</script>

<style scoped>
</style>
